<template>
  <div class="family-共济-page">
    <div class="content-wrapper">
      <div class="card-container">
        <!-- 卡片头部（标题 + 年份选择） -->
        <div class="card-header">
          <i class="el-icon-house" />
          <span>个人账户共济管理</span>
          <el-select v-model="selectedYear" class="year-select">
            <el-option
              v-for="year in years"
              :key="year"
              :label="year + '年'"
              :value="year"
            />
          </el-select>
        </div>

        <!-- 用户信息区域 -->
        <div class="user-info">
          <div class="avatar">
            <img src="" alt="用户头像">
          </div>
          <div class="user-details">
            <h3 class="user-name">刘大林</h3>
            <div class="insurance-tags">
              <el-tag type="info">职工基本医疗保险</el-tag>
              <el-tag type="info">大额医疗费用补助</el-tag>
              <el-tag type="info">长期照护保险</el-tag>
              <el-tag type="info">生育保险</el-tag>
            </div>
          </div>
        </div>

        <!-- 「我授权的亲属」模块 -->
        <div class="family-section">
          <div class="section-header">
            <h3>我授权的亲属</h3>
            <span>已绑定 <span class="blue-text">{{ myAuthorizedList.length }}</span> 人</span>
            <span class="gray-text">最多绑定 5 人</span>
          </div>
          <div
            v-for="(relative, index) in myAuthorizedList"
            :key="index"
            class="relative-item"
          >
            <el-tag :class="relative.tagClass" class="relation-tag">{{ relative.relation }}</el-tag>
            <span class="relative-name">{{ relative.name }}</span>
            <span class="id-card">{{ relative.idCard }}</span>
            <el-button type="primary" size="mini" @click="unbindRelative(relative, 'myAuthorized')">解绑</el-button>
          </div>
          <div class="section-buttons">
            <el-button type="primary" @click="viewRecord">账户共济费用记录</el-button>
            <el-button type="warning" @click="addRelative">添加我的亲属</el-button>
          </div>
        </div>

        <!-- 「授权给我使用的亲属」模块 -->
        <div class="family-section">
          <div class="section-header">
            <h3>授权给我使用的亲属</h3>
            <span>已绑定 <span class="blue-text">{{ authorizedToMeList.length }}</span> 人</span>
            <span class="gray-text">最多绑定 5 人</span>
          </div>
          <div
            v-for="(relative, index) in authorizedToMeList"
            :key="index"
            class="relative-item"
          >
            <el-tag :class="relative.tagClass" class="relation-tag">{{ relative.relation }}</el-tag>
            <span class="relative-name">{{ relative.name }}</span>
            <span class="id-card">{{ relative.idCard }}</span>
            <el-button type="primary" size="mini" @click="unbindRelative(relative, 'authorizedToMe')">解绑</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'FamilyManagement',
  data() {
    return {
      selectedYear: 2025, // 默认选中年份
      years: [2023, 2024, 2025], // 可选年份列表
      // 我授权的亲属列表
      myAuthorizedList: [
        {
          name: '刘二林',
          idCard: '610121********1234',
          relation: '女儿',
          tagClass: 'tag-daughter'
        },
        {
          name: '刘三林',
          idCard: '610121********1235',
          relation: '儿子',
          tagClass: 'tag-son'
        }
      ],
      // 授权给我使用的亲属列表
      authorizedToMeList: [
        {
          name: '刘老林',
          idCard: '610121********1234',
          relation: '父亲',
          tagClass: 'tag-father'
        }
      ]
    }
  },
  methods: {
    // 头部超时回调
    handleTimeout() {
      this.$message.warning('登录超时，即将退出')
    },
    // 解绑亲属
    unbindRelative(relative, listType) {
      this.$confirm(`确定要解绑 ${relative.name} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 根据列表类型过滤数据
        if (listType === 'myAuthorized') {
          this.myAuthorizedList = this.myAuthorizedList.filter(item => item !== relative)
        } else {
          this.authorizedToMeList = this.authorizedToMeList.filter(item => item !== relative)
        }
        this.$message.success('解绑成功')
      }).catch(() => {
        this.$message.info('已取消解绑')
      })
    },
    // 查看共济费用记录（模拟）
    viewRecord() {
      this.$message.info('查看账户共济费用记录（功能待实现）')
      // 可跳转至费用记录页面
    },
    // 添加亲属（模拟）
    addRelative() {
      this.$message.info('添加我的亲属（功能待实现）')
      // 可跳转至添加亲属页面
    }
  }
}
</script>

<style scoped>
/* 页面整体背景 */
.family-共济-page {
  height: 100vh;
  background: linear-gradient(to bottom, #409eff, #2f80ed);
  overflow: hidden;
}

/* 内容容器 */
.content-wrapper {
  padding: 20px;
  height: calc(100vh - 60px); /* 减去Header高度 */
  overflow-y: auto;
}

/* 主卡片 */
.card-container {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 0 auto;
  max-width: 600px;
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: #409eff;
  padding: 12px 16px;
  border-radius: 8px;
}
.card-header i {
  margin-right: 10px;
  font-size: 20px;
}

/* 年份选择器 */
.year-select {
  background-color: #fff;
  color: #333;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
}

/* 用户信息区域 */
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6f0ff;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
  background-color: #e6f0ff;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}
.insurance-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 亲属模块通用样式 */
.family-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #e6f0ff;
  border-radius: 8px;
}

/* 模块头部 */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.blue-text {
  color: #409eff;
  font-weight: 500;
}
.gray-text {
  color: #999;
}

/* 亲属条目 */
.relative-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 6px;
}

/* 亲属关系标签（不同颜色区分） */
.relation-tag {
  margin-right: 10px;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}
.tag-daughter {
  background-color: #ffb6c1;
  color: #cd5c5c;
}
.tag-son {
  background-color: #87cefa;
  color: #1e90ff;
}
.tag-father {
  background-color: #90ee90;
  color: #228b22;
}

/* 亲属姓名与身份证号 */
.relative-name {
  flex: 1;
  margin-right: 10px;
  font-weight: 500;
}
.id-card {
  flex: 2;
  color: #666;
}

/* 模块底部按钮组 */
.section-buttons {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}
.section-buttons .el-button {
  flex: 1;
}
</style>
